<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桔下小弈</title>

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">

</head>
<body>
    <div class="nav">
        战罢两奁分白黑 一枰何处有亏成
    </div>
    <div class="login-container">
        <!-- 登录界面的对话框 -->
        <div class="login-dialog">
            <!-- 提示信息 -->
            <h3>用户登录</h3>
            <!-- 这个表示一行 -->
            <div class="row">
                <span>用户名</span>
                <input type="text" id="user_name" class="input-field" placeholder="请输入用户名">
            </div>
            <!-- 这是另一行 -->
            <div class="row">
                <span>密码</span>
                <input type="password" id="password" class="input-field" placeholder="请输入密码">
            </div>
            <!-- 提交按钮 -->
            <div class="row">
                <button id="submit" class="btn">登录</button>
            </div>
            <!-- 跳转提醒 -->
            <div class="row redirect">
                <p>还没有账号？<a href="./register.html">立即注册</a></p>
            </div>
        </div>

    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        // 为按钮添加事件监听器
        document.getElementById("submit").addEventListener("click", submit_login);
        
        // 支持回车键登录
        document.getElementById("password").addEventListener("keyup", function(event) {
            if (event.key === "Enter") {
                submit_login();
            }
        });

        function submit_login()
        {
            // 进行登录操作
            // 1. 从表单中获取账号和密码
            // 2. 使用ajax进行提交
            let login_info = {
                username : document.getElementById("user_name").value,
                password : document.getElementById("password").value
            }

            $.ajax({
                url : "/login" ,
                type : "POST" ,
                data : JSON.stringify(login_info) , 
                contentType : "application/json" , 
                success : function(res){
                    if(res.result == false){
                        console.log(res);
                        alert("登录失败，请检查用户名和密码");
                        document.getElementById("user_name").value = "",
                        document.getElementById("password").value = ""
                    }
                    else
                    {
                        console.log(res);
                        window.location.assign("./game_hall.html");
                    }
                },
                error : function(xhr){
                    console.log(xhr);
                    alert("登录失败，请检查用户名和密码");
                    document.getElementById("user_name").value = "",
                    document.getElementById("password").value = ""
                }
            })
        }
    </script>
</body>
</html>